<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    if (session.getAttribute("user") == null) {
        response.sendRedirect("/login.jsp");
        return;
    }
%>
<html>
<head>
    <title>发布拾物</title>
    <link href="${pageContext.request.contextPath}/css/bootstrap.min.css" type="text/css" rel="stylesheet">
    <script src="${pageContext.request.contextPath}/js/jquery-3.5.1.min.js"></script>
    <style>
        .col-center-block {
            float: none;
            display: block;
            margin-left: auto;
            margin-right: auto;
        }
    </style>
</head>
<body>

<div class="container">
    <h3 class="display-5">发布拾物</h3>
    <div name="username"></div>
    <div class="">
        <div class="col-xs-6 col-md-4 col-center-block">
            <form action="/lost/post" method="post" enctype="multipart/form-data">
                <div class="form-group">
                    <label for="goodname">物品标题</label>
                    <input type="text" class="form-control" name="goodname" id="goodname" placeholder="输入拾物名称" required="required">
                </div>
                <div class="form-group">
                    <label for="goodtime">拾取时间</label>
                    <input type="datetime-local" class="form-control" name="goodtime" id="goodtime" required="required">
                </div>
                <div class="form-group">
                    <label for="goodexplain">详情说明</label>
                    <textarea name="goodexplain" class="form-control" id="goodexplain" placeholder="请描述拾物品的详细信息" required="required"></textarea>
                </div>
                <div class="form-group">
                    <label for="files">上传物品图片</label>
                    <input type="file" id="files" name="files" >
                    <img class="" src="" alt='图片' width="100" height="100" id="showimg" style="display: none">
                </div>
                <input class="btn btn-primary btn-sm" style="margin-right: 40px" type="submit" value="提交"/>
                <input class="btn btn-warning btn-sm" type="reset" value="重置"/>
            </form>
        </div>
    </div>
</div>

<script type="text/javascript">
    function show(f) {
        var reader = new FileReader();//创建文件读取对象
        var files = f.files[0];//获取file组件中的文件
        reader.readAsDataURL(files);//文件读取装换为base64类型
        reader.onloadend = function (e) {
            //加载完毕之后获取结果赋值给img
            document.getElementById("showimg").src = this.result;
            document.getElementById("showimg").style.display='block';
        }
    }
    function add(){
        var html = "<div class='col-sm-4'><div class='panel panel-info'><div class='panel-heading'><i class='fa fa-times'></i></div><div class='panel-body' style='text-align: center;'><div class='row'><div class='col-sm-12 col-md-12'><img class='updateimg img-responsive' src='img/p_big3.jpg' style='width: inherit;height: 210px;'/></div></div></div></div></div>";
        $("#files").before(html);
    }
    document.getElementById('files').onchange = function() {
        add();
        var imgFile = this.files[0];
        var fr = new FileReader();
        fr.onload = function() {
            var imgs = document.getElementsByClassName('updateimg');//获取所有img元素
            imgs[imgs.length-1].src = fr.result;//设置最后一个img的src值
            /*document.getElementById('image').getElementsByTagName('img')[0].src = fr.result;*/
        };
        fr.readAsDataURL(imgFile);
    }

</script>

</body>
</html>
